<template>
  <div class="contentShadow">
    <el-container>
      <el-header>
        <h1>专利成果</h1>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
          <el-table-column prop="number" label="序号" type="index" :index="indexMethod" align="center">
          </el-table-column>
          <el-table-column prop="item" label="名称" align="center">
          </el-table-column>
          <el-table-column prop="id" label="操作" align="center">
            <template v-slot="scope">
              <el-button type="warning" @click="detail(scope.$index)">详情</el-button>
              <el-button type="danger" @click="dialogVisible = true; removalIndex = scope.$index">删除</el-button>
              <el-dialog :visible.sync="dialogVisible" title="删除确认">
                <span>你确定要删除吗？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button type="success" @click="dialogVisible = false">取消</el-button>
                  <el-button type="danger" @click="remove(removalIndex)">确定</el-button>
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;display: flex; justify-content: center;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="currentPage" :page-sizes="[1, 5, 10, 20, 50]" :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
          </el-pagination>
        </div>
        <div style="margin-top: 15px">
          <el-button type="success" @click="add">新建</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {acquirePatent, removePatent} from "@/api/student";

export default {
  data() {
    return {
      removalIndex: null,
      dialogVisible: false,
      tableData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5 // 每页的数据条数
    };
  },
  mounted() {
    acquirePatent().then(res => {
      console.log(res.data)
      this.tableData = res.data
    })
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //生成自增的序号
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    //点击详情跳转
    detail(index) {
      const number = index + 1 + (this.currentPage - 1) * this.pageSize - 1;
      this.$router.push("/student/patent-detail?id=" + this.tableData[number].id);
    },
    //移除本条记录
    remove(index) {
      const number = index + 1 + (this.currentPage - 1) * this.pageSize - 1;
      console.log(index)
      removePatent(this.tableData[number].id).then(res => {
        if (res.code === 50003) {
          this.$message.error(res.msg)
        } else {
          this.tableData.splice(number, 1);
          this.$message.success(res.msg)
        }
        this.dialogVisible = false; // 关闭对话框
      })
    },
    //新建
    add() {
      this.$router.push("/student/patent-detail?id=0");
    }
  }
};

//点击评测跳转
</script>

<style>
@import '../../style/contentShadow.css';
</style>
